<template>
  <div>
    <form class="form-horizontal" @submit.prevent="submitFollowupForm()">
      <!-- TODO: Change these to readonly values from the statefilter. -->
      <FormFieldSelect
        v-bind:label="'Team'"
        v-bind:error="errors.team"
        v-bind:id="'team'"
        v-bind:data="currentUser.teams"
        v-bind:value="followup.team"
        @update="val => (followup.team = val)"
      />

      <FormFieldSelect
        v-bind:label="'Assign to'"
        v-bind:error="errors.user"
        v-bind:id="'user'"
        v-bind:data="runtimevals.users"
        v-bind:value="followup.user"
        @update="val => (followup.user = val)"
      />

      <FormFieldInput
        v-bind:label="'Subject'"
        v-bind:error="errors.subject"
        v-bind:id="'subject'"
        v-bind:type="'text'"
        v-bind:value="followup.subject"
        @update="val => (followup.subject = val)"
      />

      <FormFieldInput
        v-bind:label="'Appointment Date'"
        v-bind:error="errors.startOnDate"
        v-bind:id="'startOnDate'"
        v-bind:type="'date'"
        v-bind:value="followup.startOnDate"
        @update="val => (followup.startOnDate = val)"
      />

      <FormFieldInput
        v-bind:label="'Start Time (Hour:Minute AM/PM)'"
        v-bind:error="errors.startOnTime"
        v-bind:id="'startOnTime'"
        v-bind:type="'time'"
        v-bind:value="followup.startOnTime"
        @update="val => (followup.startOnTime = val)"
      />

      <FormFieldInput
        v-bind:label="'Duration'"
        v-bind:error="errors.startOnDuration"
        v-bind:id="'startOnDuration'"
        v-bind:type="'number'"
        v-bind:value="followup.startOnDuration"
        @update="val => (followup.startOnDuration = val)"
      />

      <br />
      <button type="submit" class="btn btn-primary">
        Submit Followup Form
      </button>
    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FormFieldInput from "@/components/FormFieldInput.vue";
import FormFieldSelect from "@/components/FormFieldSelect.vue";

export default {
  name: "Followup",
  components: {
    FormFieldInput,
    FormFieldSelect
  },
  computed: {
    ...mapGetters(["api", "currentUser"])
  },
  props: ["id"],
  data: function() {
    return {
      followup: "",
      errors: "",
      runtimevals: {
        users: ""
      }
    };
  },
  methods: {
    submitFollowupForm() {
      console.log("TODO");
    },
    initForm: function(that, ref) {
      that[ref] = {
        contactId: this.id,
        team: "",
        subject: "",
        startOnDate: "",
        startOnTime: "",
        startOnDuration: "30",
        user: ""
      };
    }
  },
  mounted() {
    function getData(endpoint, that, bucket, refs, errorPrompt) {
      if (endpoint) {
        fetch(endpoint)
          .then(response => response.json())
          .then(json => {
            if (json) {
              that[bucket][refs] = json;
            } else {
              that[errorPrompt] = "Response failed.";
            }
          })
          .catch(error => {
            that[errorPrompt] = `Request failed. ${error}`;
          });
      } else {
        that[errorPrompt] = "No configuration.";
      }
    }

    getData(this.api.apptUsers, this, "runtimevals", "users", "errorPrompt");

    this.initForm(this, "followup");
  }
};
</script>
